<script setup>
import {useRouter} from "vue-router";
import {onMounted, reactive} from "vue";
import {getSearch} from "@/request/api/search";
import ListContent from "@/components/ListContent.vue";

const userRouter = useRouter();

function backToHome() {
    userRouter.go(-1);
}

const state = reactive({
    keyHistory: [],
    searchKey: "",
    searchList: [],
})
onMounted(() => {
    let localHistory = localStorage.getItem('keyHistory')
    if (localHistory) {
        state.keyHistory = JSON.parse(localHistory)
    }
})
const search = async function () {
    if (state.searchKey.trim() !== '') {
        state.keyHistory.unshift(state.searchKey);
        // 去重
        state.keyHistory = [...new Set(state.keyHistory)]
        // 固定长度
        if (state.keyHistory.length > 8) state.keyHistory.splice(state.keyHistory.length - 1, 1)
        localStorage.setItem("keyHistory", JSON.stringify(state.keyHistory))
        let res = await getSearch(state.searchKey)
        state.searchList = res.data.result.songs
        // console.log(state.searchList)
    }
    // console.log(state.keyHistory)
}
const searchHistory = async function (key) {
    let res = await getSearch(key)
    state.searchList = res.data.result.songs
    // console.log(state.searchList)
}
const delHistory = function () {
    state.keyHistory = []
    localStorage.removeItem('keyHistory')
}
</script>

<template>
    <div class="searchTopBar">
        <svg aria-hidden="true" class="icon" @click="backToHome">
            <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <!--        <van-cell-group inset class="input">-->
        <!--            <van-field v-model="state.searchKey" placeholder="周杰伦" clearable :border="true" :autofocus="true"-->
        <!--                       :blur="search()"/>-->
        <!--        </van-cell-group>-->
        <input v-model="state.searchKey" class="input" placeholder="周杰伦" type="text" @keydown.enter="search">
    </div>
    <div class="searchHistory">
        <span class="spanTitle">历史</span>
        <span v-for="item in state.keyHistory" :key="item" class="spanKey" @click="searchHistory(item)">{{
                item
            }}</span>
        <svg v-show="state.keyHistory.length>0" aria-hidden="true" class="icon" @click="delHistory">
            <use xlink:href="#icon-shanchu"></use>
        </svg>
    </div>
    <ListContent v-if="Object.keys(state.searchList).length>0" :lists="state.searchList"/>
</template>

<style lang="less" scoped>
@whiteColor: #F5F5F7;
.searchTopBar {
    width: 100%;
    height: 1rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;

    .input {
        width: 90%;
        margin-left: .2rem;
        border: none;
        border-bottom: 1px solid #999;
        padding: 0.1rem;
    }
}

.searchHistory {
    width: 100%;
    padding: 0.2rem;
    position: relative;

    .spanTitle {
        font-size: 0.3rem;
        font-weight: 700;
    }

    .spanKey {
        padding: 0.1rem 0.2rem;
        background-color: @whiteColor;
        border-radius: 0.4rem;
        margin: 0.1rem 0.2rem;
        display: inline-block;
    }

    .icon {
        width: 0.6rem;
        height: 0.6rem;
        position: absolute;
        top: 0.35rem;
        right: 0.02rem;
    }
}

.list {
    width: 100%;

    .item {
        width: 100%;
        height: 1.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.2rem;

        .itemLeft {
            width: 60%;
            height: 100%;
            display: flex;
            align-items: center;

            .leftSpan {
                display: inline-block;
                width: 0.2rem;
                text-align: center;
            }

            div {
                p {
                    width: 4.54rem;
                    height: 0.4rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-weight: 700;
                }

                span {
                    font-weight: 400;
                    font-size: 0.24rem;
                    color: #999;
                }

                margin-left: 0.3rem;
            }
        }

        .itemRight {
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;

            .icon {
                fill: #999;
            }

            .movieIcon {
                position: absolute;
                left: 0;
            }

            .listIcon {
                position: absolute;
                right: 0;
            }
        }
    }
}
</style>